<template>
	<view class="content">
		<view class="item" v-for="(value, index) in list" :key="value.addr_id">
			<view class="top">
				<view class="name">{{ value.consignee }}</view>
				<view class="phone">{{ value.phone }}</view>
				<view class="tag">
					<text v-for="(item, i) in value.tag" :key="i"
						:class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
				</view>
			</view>
			<view class="bottom">
				<text>{{value.area}} {{value.address}}</text>
				<u-icon name="edit-pen-fill"  @click="handleEditClick(value.addr_id)" :size="40" color="rgba(0,0,0,0.4)"></u-icon>
				<view class="bottom-del" @click="handleDeleteClick(index,value.addr_id)">
					<u-icon name="close-circle-fill" :size="40" color="rgba(255,0,0,0.4)"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn-wrap">
			<view class="btn">
				<uv-btn shape="circle" @click="handleAddClick" text="+ 新建收货地址"></uv-btn>
			</view>
			<view class="bottom-safe-area"></view>
		</view>
		<view class="bottom-safe-area"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			//list
			getData() {
				
				this.$u.api.getAddressList().then(res=>{
					let arr=res.date || [];
					arr.forEach(item=>{
						item.tag=[]; //标签
						//是否是默认
						if(item.default_addr==2){
							item.tag.push({
								tagText: '默认'
							});
						};
						//除了默认之外的其它标签
						switch(item.tab) {
							case '1':
								item.tag.push({
									tagText: '公司'
								})
								break;
							case '2':
								item.tag.push({
									tagText: '家'
								})
								break;
							case '3':
								item.tag.push({
									tagText: '学校'
								})
								break;
							case '4':
								item.tag.push({
									tagText: '其他'
								})
								break;
							default:
						};
					})
					this.list =arr; 
				}).catch(()=>{});
				//前端设计的数据格式
				// [{
				// 		id: 1,
				// 		name: '游X',
				// 		phone: '183****5523',
				// 		tag: [{
				// 				tagText: '默认'
				// 			},
				// 			{
				// 				tagText: '家'
				// 			}
				// 		],
				// 		site: '广东省深圳市宝安区 自由路66号'
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '李XX',
				// 		phone: '183****5555',
				// 		tag: [{
				// 			tagText: '公司'
				// 		}],
				// 		site: '广东省深圳市宝安区 翻身路xx号'
				// 	},
				// 	{
				// 		id: 3,
				// 		name: '王YY1',
				// 		phone: '153****5555',
				// 		tag: [],
				// 		site: '广东省深圳市宝安区 平安路13号'
				// 	}
				// ];
			},
			//add
			handleAddClick() {
				uni.navigateTo({
					url: '/pages/integral/address-manage'
				});
			},
			//delete
			handleDeleteClick(index,id){
				this.$utils.modal({
					title:'温馨提示',
					content:'您确定要删除该条地址信息吗？',
					callback:(bool)=>{
						if (bool) {
							//request
							this.$u.api.deleteAddress({
								
								addr_id:id,
							}).then(res=>{
								if(res.code == 1){
									this.list.splice(index,1);
									this.$utils.toast('删除成功');
								};
							}).catch(()=>{});
							
						};
					}
				});
			},
			//edit
			handleEditClick(id){
				uni.navigateTo({
					url: '/pages/integral/address-manage?id='+id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 130rpx;

		.item {
			padding: 20rpx 30rpx;

			.top {
				display: flex;
				font-weight: bold;
				font-size: 34rpx;

				.phone {
					margin-left: 60rpx;
				}

				.tag {
					display: flex;
					font-weight: normal;
					align-items: center;

					text {
						display: block;
						width: 60rpx;
						height: 34rpx;
						line-height: 34rpx;
						color: #ffffff;
						font-size: 20rpx;
						border-radius: 6rpx;
						text-align: center;
						margin-left: 30rpx;
						background-color: rgb(49, 145, 253);
					}

					.red {
						background-color: red
					}
				}
			}

			.bottom {
				position: relative;
				display: flex;
				margin-top: 20rpx;
				font-size: 28rpx;
				justify-content: space-between;
				color: #999999;
				padding-right: 70rpx;
				.bottom-del{
					position: absolute;
					right:0;
					bottom:0;
				}
			}
		}

		.btn-wrap {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 0;

			.btn {
				padding: 0 24rpx;
			}
		}
	}
</style>
